<template>
	<view class="evaluate">
		<dwu-navbar title="评价"></dwu-navbar>
		<view class="certification-title">
			您对维修师傅满意吗？<text class="must">*</text>
		</view>
		<view class="evaluate-score certificate">
			<view class="score-item" :class="{active: current == index}" @click="current = index"
				v-for="(item,index) in evaluateTypeList" :key="index">
				<image v-if="current == index" :src="item.icon_hl" mode=""></image>
				<image v-else :src="item.icon" mode=""></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="certification-title">
			填写评价<text class="must">*</text>
		</view>
		<view class="certificate">
			<textarea v-model="evaluate_text" name="" id="" cols="30" rows="10" placeholder="请输入故障描述"></textarea>
		</view>
		<view class="certification-title">
			附件上传
		</view>
		<view class="file-list">
			<view class="file-item" v-for="(item,index) in file_images" :key="index">
				<image class="upload-img" :src="item" mode=""></image>
			</view>
			<view class="file-item upload" @click="choosePhoto">
				<image class="upload-icon" src="@/static/user/upload_icon.png" mode=""></image>
			</view>
		</view>
		<view class="submit" @click="onSubmit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 2,
				evaluateTypeList: [{
					title: '不满意',
					type: 1,
					icon: '/static/evaluate/icon1.png',
					icon_hl: '/static/evaluate/icon1_hl.png'
				},{
					title: '满意',
					type: 2,
					icon: '/static/evaluate/icon2.png',
					icon_hl: '/static/evaluate/icon2_hl.png'
				},{
					title: '非常满意',
					type: 3,
					icon: '/static/evaluate/icon3.png',
					icon_hl: '/static/evaluate/icon3_hl.png'
				}],
				file_images: [],
				evaluate_text: ''
			};
		},
		onLoad(options) {
			this.order_id = options.order_id
			this.order_sn = options.order_sn
			// this.getEvaluateType()
		},
		methods: {
			getEvaluateType() {
				this.request.http('/index/pingjia', 'post').then(res => {
					let data = res.data
					if (data.code == 1) {
						this.evaluateTypeList = data.data
					}
				})
			},
			choosePhoto(type) {
				if (this.disabled) return
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.upload.file('/Common/upload', res.tempFilePaths[0], 'file')
							.then(file => {
								uni.hideLoading()
								file = JSON.parse(file)
								if (file.code == 1) {
									// this.form['attachments_img'] = file.data.fullurl
									this.file_images.push(file.data.fullurl)
									uni.showToast({
										title: '上传成功'
									})
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'none'
									})
								}
							})
					}
				})
			},
			onSubmit() {
				if (!this.evaluate_text) {
					uni.showToast({
						icon: 'none',
						title: '请输入评价'
					})
					return
				}
				this.request.http('/user/markAdd', 'post',{
					order_id: this.order_id,
					order_sn: this.order_sn,
					evaluate_text: this.evaluate_text,
					file_images: this.file_images.join(','),
					is_type: this.evaluateTypeList[this.current].type,
					
				}).then(res => {
					let data = res.data
					if (data.code == 1) {
						// let pages = getCurrentPages();
						// let prevPage = pages[pages.length - 2];
						// prevPage.$vm.getOrderDetail()
						uni.navigateBack()
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #f7f9f9;
	}

	.evaluate {
		padding: 24rpx 20rpx 60rpx;

		.certification-title {
			position: relative;
			padding-left: 26rpx;
			margin-top: 34rpx;
			margin-bottom: 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #474747;
			line-height: 42rpx;

			.must {
				position: absolute;
				top: -2rpx;
				margin-left: 0rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 23rpx;
				color: #D55252;
			}
		}

		.evaluate-score {
			display: flex;
			align-items: center;
			justify-content: center;

			.score-item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-right: 108rpx;
				image {
					margin-bottom: 12rpx;
					width: 70rpx;
					height: 70rpx;
				}
				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #999999;
					line-height: 33rpx;
				}

				&:last-child {
					margin-right: 0;
				}
			}
		}


		.certificate {
			margin: 18rpx 0;
			padding: 34rpx 25rpx;
			background-color: #fff;
			border-radius: 32rpx;

			.certificate-title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 27rpx;
					color: #313131;

					.must {
						margin-left: 6rpx;
						color: #D55252;
					}
				}

				.right {
					display: flex;
					align-items: center;

					image {
						margin-right: 10rpx;
						width: 26rpx;
						height: 26rpx;
					}

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 27rpx;
						color: #B0DD67;
					}
				}
			}

			.certificate-list {
				margin-top: 34rpx;

				.certificate-item {
					margin-top: 14rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						display: block;
						width: 587rpx;
						height: 88rpx;
						background: #F6F7FB;
						border-radius: 19rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 27rpx;
						color: #333333;
						line-height: 88rpx;
						text-align: center;
					}

					image {
						margin-left: 26rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}


			textarea {
				// margin-top: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx !important;
			}
		}

		.file-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.file-item {
				width: 205rpx;
				height: 205rpx;
				border-radius: 38rpx;
				overflow: hidden;
				margin-right: 30rpx;
				margin-bottom: 30rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}

				.upload-img {
					width: 100%;
					height: 100%;
				}

				&.upload {
					display: flex;
					align-items: center;
					justify-content: center;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 13rpx 8rpx rgba(245, 245, 245, 0.16);

					.upload-icon {
						width: 70rpx;
						height: 70rpx;
					}
				}
			}
		}

		.submit {
			position: fixed;
			bottom: 42rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 650rpx;
			height: 102rpx;
			background: #3D3D3D;
			border-radius: 40rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 27rpx;
			color: #B0DD67;
			line-height: 102rpx;
			text-align: center;
		}
	}
</style>